<template>
  <a-list
    item-layout="vertical"
    :grid="{ gutter: 13, md:4 }"
    size="large"
    :pagination="pagination"
    :data-source="listData"
  >
    <a-list-item slot="renderItem" key="item.title" slot-scope="item">
      <a-card hoverable>
        <img slot="cover" alt="example" :src="item['封面']" />
        <a :href="item['地址']"
          ><h2>{{ item['标题'] }}</h2></a>
        <p>
          <a-tag color="cyan">
            {{ item['类别']}}
          </a-tag>
           <a-tag color="blue">
            {{ item['单位']}}
          </a-tag>
        </p>
      </a-card>
    </a-list-item>
  </a-list>
</template>

<script>
import * as d3 from "d3-fetch"

const listData = [];

export default {
  data() {
    return {
      listData,
      pagination: {
        pageSize: 8,
      },
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    getList: function() {

var that = this

      d3.csv('data.csv').then(function(data){
     that.listData = data;
      })
    },
  },
};
</script>

<style>
.ant-card-cover img {
  height: 250px;
  object-fit: cover;
}
</style>